<template>
    <div class="gjxz">
        <div v-for="items in list" :key="items.id">
            <div class="title">
                {{items.name}}
            </div>
            <div class="download-tool-used">
                <div class="item" v-for="item in items.navis" :key="item.guid">
                    <el-checkbox v-model="item.checked" @change="select(item)" :disabled="isDisabled(item.checked)">
                        <span>{{item.name}}</span>
                    </el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    head: {},
    props: {
        usedIdArr: {
            type: [Object, Array],
            default: () => ({}),
        },
        isAllDisabled: {
            type: Boolean,
            default: false,
        },
    },
    components: {},
    data() {
        return {
            list: [],
            dialogVisible: false,
            currentCity: {},
        };
    },
    computed: {
        ...mapGetters({
            navigateData: 'navigate/navigateData',
        }),
    },
    watch: {
        navigateData: {
            handler(n, o) {
                this.getData();
            },
            deep: true,
        },
        usedIdArr: {
            handler(n, o) {
                this.findIdByChecked();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        getData() {
            this.list = clone(this.navigateData.gjxzlist.nodes);
            this.findIdByChecked();
        },
        setWheel() {
            var tabsContainer = document.querySelector('.download-tool-used');
            if(!tabsContainer) {return};
            tabsContainer.addEventListener('wheel', (event) => {
                event.preventDefault();
                tabsContainer.scrollLeft += event.deltaY;
            });
        },
        /**
         * 寻找选中状态的 id
         */
        findIdByChecked() {
            const that = this;
            for(let i=0; i< that.list.length ; i++) {
                for (let j = 0; j < that.list[i].navis.length ; j++) {
                    let item = that.list[i].navis[j];
                    let res = that.usedIdArr.includes(item.guid);
                    item.checked = !!res ? true : false;
                }
            }
        },
        select(item) {
            const that = this;
            let id = item.guid;
            let arr = [];

            if (item.checked) {
                arr = [id, ...that.usedIdArr];
            } else {
                arr = that.usedIdArr.filter((item) => item != id);
            }
            this.$emit('update:usedIdArr', arr);
        },

        isDisabled(checked) {
            let len = this.usedIdArr.length;
            if (len > 9 && !checked) {
                return true;
            } else {
                return false;
            }
        },
    },
    mounted() {
        this.getData();
        this.setWheel();
        // this.$emit('update:usedIdArr',['1'])
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.gjxz {
    .title {
        margin: 5px 0;
        // color: #3b68ff;
    }
    .download-tool-used {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .item {
            width: 190px;
            margin: 5px 0;
            margin-right: 15px;
        }
    }
}
</style>
 